<template>
    <div class="flexbox flexcolumn">
        <!-- 选择直播场次 -->
        <div class="w_bg pd_20 rd pb_null" style="display:block">
            <div class="font_16 color_01">选择直播场次</div>
            <div class="flexbox flexcenter flexbetween brand_head">
                <div class="flexbox flexcenter">
                    <div class="brand_item flexbox flexcenter" @click="switchTab('/compassday')">
                        <span class="brand_title">按天数汇总</span>
                    </div>
                    <div class="brand_item flexbox flexcenter active">
                        <span class="brand_title">按单场次</span>
                    </div>
                </div>
                <!-- <el-radio-group v-model="radio1" size="small">
                    <el-radio-button label="1">近7天</el-radio-button>
                    <el-radio-button label="2">近30天</el-radio-button>
                    <el-radio-button label="3">近90天</el-radio-button>
                    <el-radio-button label="4">自然日</el-radio-button>
                    <el-radio-button label="5">自然周</el-radio-button>
                    <el-radio-button label="6">自然月</el-radio-button>
                </el-radio-group> -->
            </div>
            <el-table :data="tableData" class="com_table comss_table" max-height="700" @row-click='selectLive' :row-style="rowClass" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="" label="主播" min-width="260">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter">
                            <img :src="scope.row.author_avatar" alt="" class="author_info_img">
                            <div class="live_author_info">
                                <div class="author_info_name">{{scope.row.title}}</div>
                                <div class="author_info_id">抖音号：{{scope.row.author_aweme_id}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="start_ts" label="开播时间" width="180">
                    <template slot-scope="scope">
                        {{formatDate(scope.row.start_ts)}}
                    </template>
                </el-table-column>
                <el-table-column prop="acu" label="平均在线人数" width="140">
                </el-table-column>
                <el-table-column prop="bind_product_cnt" label="带货商品数量" width="140">
                </el-table-column>
                <el-table-column prop="pay_money" label="直播间成交金额" width="140">
                </el-table-column>
                <el-table-column prop="cl_inlive_pay_combo_cnt" label="直播间成交件数" width="140">
                </el-table-column>
                <el-table-column prop="return_money" label="退款金额" width="140">
                </el-table-column>
            </el-table>
            <div class="page_box flexbox flexcenter">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="liveInfo.page" :page-size="liveInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="live_total">
                </el-pagination>
            </div>
        </div>
        <!-- 整体店铺指标 -->
        <div class="w_bg pd_20 rd mt_12" style="display:block">
            <div class="flexbox flexcenter flexbetween">
                <div class="font_16 color_01">整体店铺指标</div>
                <div class="flexbox flexcenter">
                    <img src="../../assets/img/shop_time.svg" alt="">
                    <span class="shop_time font_14 color_02">直播总时长：{{startDate}}</span>
                </div>
            </div>
            <div class="pass_box mt_16">
                <div class="pass_title">综合指标</div>
                <div class="zonghe_box flexbox flexcenter mt_16" v-loading="wh_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="zonghe_item flexbox flexcolumn flexjust">
                        <span class="zh_text">消耗金额</span>
                        <div class="zh_val">￥{{zongheInfo.cost}}</div>
                    </div>
                    <div class="zonghe_item flexbox flexcolumn flexjust">
                        <span class="zh_text">成交ROI</span>
                        <div class="zh_val">{{zongheInfo.roi | keepTwoNumT}}</div>
                    </div>
                    <div class="zonghe_item flexbox flexcolumn flexjust">
                        <span class="zh_text">退货金额</span>
                        <div class="zh_val">￥{{zongheInfo.return_money}}</div>
                    </div>
                    <div class="zonghe_item flexbox flexcolumn flexjust">
                        <span class="zh_text">实际ROI</span>
                        <div class="zh_val">{{zongheInfo.pay_roi | keepTwoNumT}}</div>
                    </div>
                    <div class="zonghe_item flexbox flexcolumn flexjust">
                        <span class="zh_text">成交金额</span>
                        <div class="zh_val">￥{{zongheInfo.pay_money}}</div>
                    </div>
                </div>
                <div class="zonghe_line"></div>
                <div class="pass_title">来源</div>
                <div class="font_14 color_02 mt_16">流量来源</div>
                <div class="flow_title flexbox flexcenter mt_12">
                    <div class="flow_item flexbox flexcenter flexbetween blue" :style="{width:pay_rate_width+'%'}">
                        <span>付费成交</span>
                        <span>{{pay_rate}}%</span>
                    </div>
                    <div class="flow_item flexbox flexcenter flexbetween green" :style="{width:natural_rate_width+'%'}">
                        <span>免费成交</span>
                        <span>{{natural_rate}}%</span>
                    </div>
                </div>
                <div class="font_14 color_02 mt_24">成交来源</div>
                <div class="deal_box flexbox flexcenter mt_12" v-loading="pay_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="deal_left">
                        <div id="dirPieChart" style="height:200px;height:200px"></div>
                    </div>
                    <div class="deal_right flex flexbox flexcenter flexbetween">
                        <div class="deal_pay">
                            <div class="deal_item flexbox flexcenter flexbetween">
                                <div class="deal_title flexbox flexcenter">
                                    <span class="pay_circle pay_circle_blue"></span>
                                    <span class="color_01">付费流量</span>
                                </div>
                                <div class="deal_val color_01">{{pay_rate_all}}%</div>
                            </div>
                            <div class="deal_item flexbox flexcenter flexbetween" v-for="(item,index) in payFlow" :key="index">
                                <div class="deal_title flexbox flexcenter">
                                    <span class="pay_circle"></span>
                                    <span class="color_02">{{item.title}}</span>
                                </div>
                                <div class="deal_val color_02">{{Number(item.rate)*100}}%</div>
                            </div>
                        </div>
                        <div class="deal_live">
                            <div class="deal_item flexbox flexcenter flexbetween">
                                <div class="deal_title flexbox flexcenter">
                                    <span class="pay_circle pay_circle_green"></span>
                                    <span class="color_01">直播自然推荐流量</span>
                                </div>
                                <div class="deal_val color_01">{{natural_rate_all}}%</div>
                            </div>
                            <div class="deal_item flexbox flexcenter flexbetween" v-for="(item,index) in naturalFlow" :key="index">
                                <div class="deal_title flexbox flexcenter">
                                    <span class="pay_circle"></span>
                                    <span class="color_02">{{item.title}}</span>
                                </div>
                                <div class="deal_val color_02">{{Number(item.rate)*100}}%</div>
                            </div>
                        </div>
                        <div class="deal_other">
                            <div class="deal_item flexbox flexcenter flexbetween" v-for="(item,index) in otherFlow" :key="index">
                                <div class="deal_title flexbox flexcenter">
                                    <span class="pay_circle" :class="'pay_circle_'+index"></span>
                                    <span class="color_01">{{item.title}}</span>
                                </div>
                                <div class="deal_val color_01">{{(Number(item.rate)*100).toFixed(0)}}%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 流量 -->
        <div class="w_bg pd_20 rd mt_12" style="display:block">
            <div class="font_16 color_01">流量</div>
            <div class="pass_box mt_16">
                <div class="pass_title">免费观看人次</div>
                <div class="pay_wach_box flexbox" v-loading="mf_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="pay_wach_item" v-for="(item,index) in mfWatch" :key="index">
                        <div class="wach_top flexbox flexcenter">
                            <img src="../../assets/img/mf_icon1.svg" alt="" v-if="item.structure_type==1">
                            <img src="../../assets/img/mf_icon2.svg" alt="" v-else-if="item.structure_type==2">
                            <img src="../../assets/img/mf_icon3.svg" alt="" v-else-if="item.structure_type==3">
                            <img src="../../assets/img/mf_icon4.svg" alt="" v-else-if="item.structure_type==4">
                            <img src="../../assets/img/mf_icon5.svg" alt="" v-else-if="item.structure_type==5">
                            <span class="wach_title font_14 color_01">{{item.title}}</span>
                        </div>
                        <div class="wach_bot">
                            <div class="wach_bot_item flexbox flexcenter flexbetween">
                                <span class="wach_text">直播间进入人次</span>
                                <span class="wach_val">{{item.frequency}}</span>
                            </div>
                            <div class="wach_bot_item flexbox flexcenter flexbetween">
                                <span class="wach_text">转化率</span>
                                <span class="wach_val">{{item.ratio | keepTwoNum}}%</span>
                            </div>
                            <div class="wach_bot_item flexbox flexcenter flexbetween">
                                <span class="wach_text">观看占比</span>
                                <span class="wach_val">{{item.proportion | keepTwoNum}}%</span>
                            </div>
                            <div class="wach_bot_item flexbox flexcenter flexbetween">
                                <span class="wach_text">停留时长</span>
                                <span class="wach_val">{{secondToTimeStr(Number(item.duration).toFixed(0))}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 看播→成交转化率 -->
        <div class="w_bg pd_20 rd mt_12">
            <div class="font_16 color_01">看播→成交转化率</div>
            <div class="pass_box mt_16">
                <div class="pass_title">流量转化路径</div>
                <div class="rat_box flexbox flexjust flexcenter">
                    <div class="rat_item flexbox flexjust flexcenter">
                        <span class="blue"></span>
                        广告流量
                    </div>
                    <div class="rat_item flexbox flexjust flexcenter">
                        <span class="green"></span>
                        自然流量
                    </div>
                </div>
                <div class="rat_content" v-loading="ad_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <img src="../../assets/img/flow_bg.png" alt="" class="flow_bg">
                    <span class="rat_text rat_text1">直播间曝光</span>
                    <span class="rat_text rat_text2">进入直播间</span>
                    <span class="rat_text rat_text3">商品点击</span>
                    <span class="rat_text rat_text4">创建订单</span>
                    <span class="rat_text rat_text5">成交</span>
                    <span class="rat_text rat_text6">{{adverTraffic.show_room_uv}}人</span>
                    <span class="rat_text rat_value_box rat_value_box_l rat_text7">{{adverTraffic.enter_room_uv}}人</span>
                    <span class="rat_text rat_value_box rat_value_box_l rat_text8">{{adverTraffic.click_product_uv}}人</span>
                    <span class="rat_text rat_value_box rat_value_box_l rat_text9">{{adverTraffic.create_order_uv}}人</span>
                    <span class="rat_text rat_value_box rat_value_box_l rat_text10">{{adverTraffic.pay_order_uv}}人</span>
                    <span class="rat_text rat_value_box rat_value_box_r rat_text7">{{naturalTraffic.enter_room_uv}}人</span>
                    <span class="rat_text rat_value_box rat_value_box_r rat_text8">{{naturalTraffic.click_product_uv}}人</span>
                    <span class="rat_text rat_value_box rat_value_box_r rat_text9">{{naturalTraffic.create_order_uv}}人</span>
                    <span class="rat_text rat_value_box rat_value_box_r rat_text10">{{naturalTraffic.pay_order_uv}}人</span>
                    <span class="rat_text_black rat_text11">{{adverTraffic.total_trans_ratio | keepTwoNum}}%</span>
                    <span class="rat_text_black rat_text12">{{adverTraffic.enter_click_ratio | keepTwoNum}}%</span>
                    <span class="rat_text_black rat_text13">{{adverTraffic.click_trans_ratio | keepTwoNum}}%</span>
                    <span class="rat_text_black rat_text14">{{adverTraffic.create_trans_ratio | keepTwoNum}}%</span>
                    <span class="rat_text_black rat_text15">{{naturalTraffic.total_trans_ratio | keepTwoNum}}%</span>
                    <span class="rat_text_black rat_text16">{{naturalTraffic.enter_click_ratio | keepTwoNum}}%</span>
                    <span class="rat_text_black rat_text17">{{naturalTraffic.click_trans_ratio | keepTwoNum}}%</span>
                    <span class="rat_text_black rat_text18">{{naturalTraffic.create_trans_ratio | keepTwoNum}}%</span>
                </div>
            </div>
            <div class="pass_box mt_16">
                <div class="pass_title">商品转化路径</div>
                <div class="shop_content" v-loading="sp_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <img src="../../assets/img/flow_bg2.png" alt="" class="flow_bg">
                    <div class="shop_rat_text shop_rat_text10">
                        <div class="shop_rat_val">{{shopConversion.show_room_uv}}</div>
                        <div class="shop_rat_title">直播间曝光数</div>
                    </div>
                    <div class="shop_rat_text shop_rat_text1">
                        <div class="shop_rat_val">{{shopConversion.enter_room_uv}}</div>
                        <div class="shop_rat_title">直播间进入人数</div>
                    </div>
                    <div class="shop_rat_text shop_rat_text2">
                        <div class="shop_rat_val">{{shopConversion.show_product_uv}}</div>
                        <div class="shop_rat_title">商品曝光数</div>
                    </div>
                    <div class="shop_rat_text shop_rat_text3">
                        <div class="shop_rat_val">{{shopConversion.click_product_uv}}</div>
                        <div class="shop_rat_title">商品点击人数</div>
                    </div>
                    <div class="shop_rat_text shop_rat_text4">
                        <div class="shop_rat_val">{{shopConversion.pay_order_uv}}</div>
                        <div class="shop_rat_title">成交人数</div>
                    </div>
                    <div class="shop_rat_text shop_rat_text11">
                        <div class="shop_rat_val">用户可不进入直播间，直接通过点击</div>
                        <div class="shop_rat_title">直播预览流的商品卡片查看商品</div>
                    </div>
                    <div class="shop_rat_text shop_rat_text5">
                        <div class="shop_rat_val">客单价：{{shopConversion.price | keepTwoNumT}}</div>
                        <div class="shop_rat_title">成交金额：{{shopConversion.pay_money | keepTwoNumT}}</div>
                    </div>
                    <div class="shop_rat_text_black shop_rat_text6">
                        <div class="shop_rat_val">{{shopConversion.total_trans_ratio | keepTwoNum}}%</div>
                        <div class="shop_rat_title">整体成交转化率</div>
                    </div>
                    <div class="shop_rat_text_black shop_rat_text7">
                        <div class="shop_rat_val">{{shopConversion.show_enter_ratio | keepTwoNum}}%</div>
                        <div class="shop_rat_title">看播率</div>
                    </div>
                    <div class="shop_rat_text_black shop_rat_text8">
                        <div class="shop_rat_val">{{shopConversion.enter_proshow_ratio | keepTwoNum}}%</div>
                        <div class="shop_rat_title" style="line-height:16px">进入<br />曝光转化率</div>
                    </div>
                    <div class="shop_rat_text_black shop_rat_text9">
                        <div class="shop_rat_val">{{shopConversion.proshow_proclick_ratio | keepTwoNum}}%</div>
                        <div class="shop_rat_title" style="line-height:16px">曝光<br />点击转化率</div>
                    </div>
                    <div class="shop_rat_text_black shop_rat_text12">
                        <div class="shop_rat_val">{{shopConversion.proclick_pay | keepTwoNum}}%</div>
                        <div class="shop_rat_title" style="line-height:16px">点击<br />成交转化率</div>
                    </div>
                </div>
                <div class="zonghe_line"></div>
                <div class="pass_title">直播商品列表</div>
                <el-table :data="tableData2" class="com_table" max-height="600" @sort-change='sortChange'>
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="" label="商品信息" min-width="370">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter">
                                <img :src="scope.row.img" alt="" class="live_img">
                                <div class="live_name">{{scope.row.title}}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="explain_cnt" label="讲解次数" min-width="150" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="pay_money" label="成交金额" min-width="150" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="pay_number" label="成交件数" min-width="120" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="pay_people" label="成交人数" min-width="120" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="pay_order" label="成交订单数" min-width="150" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="show_number" label="商品曝光人数" min-width="150" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="click_product" label="商品点击人数" min-width="180" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="return_number" label="退款人数" min-width="120" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="return_order" label="退款订单数" min-width="140" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="return_money" label="退款金额" min-width="140" sortable="custom">
                    </el-table-column>
                </el-table>
                <div class="page_box flexbox flexcenter">
                    <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="shopInfo.page" :page-size="shopInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="shop_total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            wh_loading:false,
            pay_loading:false,
            mf_loading:false,
            ad_loading:false,
            sp_loading:false,
            st_loading:false,
            is_flow:false,
            is_shop:false,
            pieData:[],
            currActive: 1,
            radio1: 1,
            liveInfo: {
                page: 1,
                limit: 20,
            },
            live_total: 0,
            live_setpage: 1,
            room_id:'',
            tableData: [],
            zongheInfo:{},
            pay_rate:'',
            pay_rate_width: "",
            pay_rate_all:'',
            natural_rate:'',
            natural_rate_width: "",
            natural_rate_all:'',
            startDate:'',
            payFlow:[],
            naturalFlow:[],
            otherFlow:[],
            mfWatch:[],
            adverTraffic:{},
            naturalTraffic:{},
            shopConversion:{},
            tableData2: [],
            shopInfo:{
                page: 1,
                limit: 20,
                room_id:'',
                field:'',
                order:'',
            },
            shop_total: 0,
            shop_setpage: 1,
        };
    },
    created() {
        this.getLiveList(1)
        
    },
    methods: {

        rowClass(row, index) {
            if (row.row.room_id == this.room_id) {
                return { "background-color": "rgba(68, 117, 255, 0.1)" };
            }
        },

        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
            });
        },

        sesstionData(){
            let sessionForm = {
                room_id:this.room_id,
                liveInfo:this.liveInfo,
                startDate:this.startDate,
            }
            window.sessionStorage.setItem(
                "liveOne",
                JSON.stringify(sessionForm)
            );
        },

        
        // 选择直播间
        selectLive(row){
            this.room_id = row.room_id
            this.shopInfo.room_id = row.room_id
            this.startDate = this.secondToTimeStr(row.duration)
            this.getWholeList()
            this.getPaySource()
            this.getStructure()
            this.getFlowconversion()
            this.getPayconversion()
            this.getShoplist(1)
            this.sesstionData()
        },

        // 时间戳转格式
        formatDate(date) {
            var date = new Date(date*1000);
            var YY = date.getFullYear() + '-';
            var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
            var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
            return YY + MM + DD +" "+hh + mm + ss;
        },

        // 秒数转换
        secondToTimeStr(t) {
            if (!t) return;
            if (t < 60) return "00:" + ((i = t) < 10 ? "0" + i : i)+'秒';
            if (t < 3600)
                return (
                    "" +
                    ((a = parseInt(t / 60)) < 10 ? "0" + a : a) +
                    "分" +
                    ((i = t % 60) < 10 ? "0" + i : i)+'秒'
                );
            if (3600 <= t) {
                var a,
                    i,
                    e = parseInt(t / 3600);
                return (
                    (e < 10 ? "0" + e : e) +
                    "时" +
                    ((a = parseInt((t % 3600) / 60)) < 10 ? "0" + a : a) +
                    "分" +
                    ((i = t % 60) < 10 ? "0" + i : i)+'秒'
                );
            }
        },

        //获取直播间
        async getLiveList(page) {
            this.liveInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/RetailersReport/roomlist",
                this.liveInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.live_total = res.data.count;
                let sessionForm  = JSON.parse(window.sessionStorage.getItem("liveOne"))
                if(sessionForm){
                    this.room_id = sessionForm.room_id
                    this.liveInfo = sessionForm.liveInfo
                    this.startDate = sessionForm.startDate
                    this.shopInfo.room_id = sessionForm.room_id
                }else{
                    this.startDate  = this.secondToTimeStr(res.data.list[0].duration)
                    this.room_id = res.data.list[0].room_id;
                    this.shopInfo.room_id = res.data.list[0].room_id;
                }
                this.getWholeList()
                this.getPaySource()
                this.getStructure()
                this.getFlowconversion()
                this.getPayconversion()
                this.getShoplist(1)
            }
        },

        //获取综合指数
        async getWholeList() {
            this.wh_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/RetailersReport/whole",
                {
                    room_id:this.room_id
                }
            );
            if (res.code !== 200) {
                this.wh_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.zongheInfo = res.data
                this.wh_loading = false;
            }
        },

        //获取成交来源
        async getPaySource() {
            this.pay_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/RetailersReport/pay_source",
                {
                    room_id:this.room_id
                }
            );
            if (res.code !== 200) {
                this.pay_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                let pieData = []
                let otherData = []
                let pay_rate_all = null
                let natural_rate_all = null
                let pay_obj = {
                    name:'付费流量',
                    value:null
                }
                let nat_obj = {
                    name:'直播自然推荐流量',
                    value:null
                }
                for(let i in res.data.pay){
                    pay_obj.value+=res.data.pay[i].numerical
                    pay_rate_all+=Number(res.data.pay[i].rate)
                    if(res.data.pay[i].source_type==8){
                        res.data.pay[i].title='千川PC广告'
                    }else if(res.data.pay[i].source_type==9){
                        res.data.pay[i].title='小店随心推'
                    }else if(res.data.pay[i].source_type==2002){
                        res.data.pay[i].title='千川品牌广告'
                    }else if(res.data.pay[i].source_type==2003){
                        res.data.pay[i].title='其他竞价广告'
                    }else if(res.data.pay[i].source_type==2004){
                        res.data.pay[i].title='其他品牌广告'
                    }
                }
                for(let i in res.data.natural){
                    nat_obj.value+=res.data.natural[i].numerical
                    natural_rate_all+=Number(res.data.natural[i].rate)
                    if(res.data.natural[i].source_type==202){
                        res.data.natural[i].title='推荐feeds'
                    }else if(res.data.natural[i].source_type==203){
                        res.data.natural[i].title='直播广场'
                    }else if(res.data.natural[i].source_type==204){
                        res.data.natural[i].title='同城feeds'
                    }else if(res.data.natural[i].source_type==205){
                        res.data.natural[i].title='其他'
                    }
                }
                for(let i in res.data.other){
                    if(res.data.other[i].source_type==206){
                        res.data.other[i].title='关注tab'
                        otherData.push({
                            name:'关注tab',
                            value:res.data.other[i].numerical
                        })
                    }else if(res.data.other[i].source_type==201){
                        res.data.other[i].title='短视频引流'
                        otherData.push({
                            name:'短视频引流',
                            value:res.data.other[i].numerical
                        })
                    }else if(res.data.other[i].source_type==207){
                        res.data.other[i].title='搜索'
                        otherData.push({
                            name:'搜索',
                            value:res.data.other[i].numerical
                        })
                    }else if(res.data.other[i].source_type==209){
                        res.data.other[i].title='抖音商场'
                        otherData.push({
                            name:'抖音商场',
                            value:res.data.other[i].numerical
                        })
                    }else if(res.data.other[i].source_type==208){
                        res.data.other[i].title='个人主页'
                        otherData.push({
                            name:'个人主页',
                            value:res.data.other[i].numerical
                        })
                    }else if(res.data.other[i].source_type==210){
                        res.data.other[i].title='活动页'
                        otherData.push({
                            name:'活动页',
                            value:res.data.other[i].numerical
                        })
                    }else if(res.data.other[i].source_type==2011){
                        res.data.other[i].title='其他'
                        otherData.push({
                            name:'其他',
                            value:res.data.other[i].numerical
                        })
                    }
                }
                pieData = [pay_obj,nat_obj,...otherData]
                this.pieData = pieData
                this.payFlow = res.data.pay
                this.naturalFlow = res.data.natural
                this.otherFlow = res.data.other
                this.pay_rate_width = res.data.pay_rate==0?50:Number(res.data.pay_rate) * 100
                this.natural_rate_width = res.data.natural_rate==0?50:Number(res.data.natural_rate) * 100
                this.pay_rate = (Number(res.data.pay_rate)*100).toFixed(0)
                this.natural_rate = (Number(res.data.natural_rate)*100).toFixed(0)
                this.pay_rate_all = (Number(pay_rate_all * 100)).toFixed(0)
                this.natural_rate_all = (Number(natural_rate_all * 100)).toFixed(0);
                this.$nextTick(() => {
                    this.dirPieChart();
                });
                this.pay_loading = false;
            }
        },

        // 饼状图表
        dirPieChart() {
            let that = this
            const myChart = this.$echarts.init(
                document.getElementById("dirPieChart")
            );
            var option = {
                tooltip: {
                    trigger: "item",
                    position:function(point, params, dom, rect, size){
                        return [point[0],'10%']
                    },
                    formatter:function(params){
                        if(params.name=='付费流量'){
                            let text = `<div>
                                <div class="font_14 color_01">付费流量：(${params.value})${that.pay_rate_all}%</div>
                                <div class="font_12 color_02">${that.payFlow[0].title}：(${that.payFlow[0].numerical})${Number(that.payFlow[0].rate)*100}%</div>
                                <div class="font_12 color_02">${that.payFlow[1].title}：(${that.payFlow[1].numerical})${Number(that.payFlow[1].rate)*100}%</div>
                                <div class="font_12 color_02">${that.payFlow[2].title}：(${that.payFlow[2].numerical})${Number(that.payFlow[2].rate)*100}%</div>
                                <div class="font_12 color_02">${that.payFlow[3].title}：(${that.payFlow[3].numerical})${Number(that.payFlow[3].rate)*100}%</div>
                                <div class="font_12 color_02">${that.payFlow[4].title}：(${that.payFlow[4].numerical})${Number(that.payFlow[4].rate)*100}%</div>
                                </div>
                            `
                            return text
                        }else if(params.name=='直播自然推荐流量'){
                            let text = `<div>
                                <div class="font_14 color_01">直播自然推荐流量：(${params.value})${that.natural_rate_all}%</div>
                                <div class="font_12 color_02">${that.naturalFlow[0].title}：(${that.naturalFlow[0].numerical})${Number(that.naturalFlow[0].rate)*100}%</div>
                                <div class="font_12 color_02">${that.naturalFlow[1].title}：(${that.naturalFlow[1].numerical})${Number(that.naturalFlow[1].rate)*100}%</div>
                                <div class="font_12 color_02">${that.naturalFlow[2].title}：(${that.naturalFlow[2].numerical})${Number(that.naturalFlow[2].rate)*100}%</div>
                                <div class="font_12 color_02">${that.naturalFlow[3].title}：(${that.naturalFlow[3].numerical})${Number(that.naturalFlow[3].rate)*100}%</div>
                                </div>
                            `
                            return text
                        }else{
                            let text = `<div>
                                <div class="font_14 color_01">${params.name}：(${params.value})${params.percent.toFixed(0)}%</div>
                                </div>
                            `
                            return text
                        }
                    }
                },
                color:['#4475FF', '#00CB82', '#FF855F','#FFD74B','#49BEFF','#00C6D2','#FF8080','#0082CB','#DFAAFF'],
                legend: {
                    show:false,
                    top: "5%",
                    left: "center",
                    formatter: (name) => {
                        return name.slice(0, 6);
                    },
                },
                series: [
                    {
                        type: "pie",
                        radius: ["65%", "95%"],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: "#fff",
                            borderWidth: 2,
                        },
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "15",
                                fontWeight: "bold",
                                formatter: (name) => {
                                    return name.name.slice(0, 10);
                                },
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: this.pieData,
                    },
                ],
            };
            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },

        //获取免费观看人次
        async getStructure() {
            this.mf_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/RetailersReport/structure",
                {
                    room_id:this.room_id
                }
            );
            if (res.code !== 200) {
                this.mf_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                for(let i in res.data.list){
                    if(res.data.list[i].structure_type==1){
                        res.data.list[i].title = '推荐Feed'
                    }else if(res.data.list[i].structure_type==2){
                        res.data.list[i].title = '关注'
                    }else if(res.data.list[i].structure_type==3){
                        res.data.list[i].title = '短视频引流'
                    }else if(res.data.list[i].structure_type==4){
                        res.data.list[i].title = '搜索'
                    }else if(res.data.list[i].structure_type==5){
                        res.data.list[i].title = '其他'
                    }
                }
                
                this.mfWatch = res.data.list
                this.mf_loading = false;
            }
        },

        //获取流量转化路径
        async getFlowconversion() {
            this.ad_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/RetailersReport/flowconversion",
                {
                    room_id:this.room_id
                }
            );
            if (res.code !== 200) {
                this.ad_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.adverTraffic = res.data[0]
                this.naturalTraffic = res.data[1]
                this.ad_loading = false;
            }
        },

        //获取商品转化路径
        async getPayconversion() {
            this.sp_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/RetailersReport/payconversion",
                {
                    room_id:this.room_id
                }
            );
            if (res.code !== 200) {
                this.sp_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.shopConversion = res.data
                this.sp_loading = false;
            }
        },

        //获取商品列表
        async getShoplist(page) {
            this.shopInfo.page = page;
            this.st_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/RetailersReport/productlist",
                this.shopInfo
            );
            if (res.code !== 200) {
                this.st_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.tableData2 = res.data.list
                this.shop_total = res.data.count
                this.st_loading = false;
            }
        },

        // 排序
        sortChange(column) {
            this.shopInfo.field = "";
            this.shopInfo.order = "";
            if (!column.order) {
                this.getShoplist(this.shop_setpage);
                return;
            } else {
                var order = column.order.slice(0, -6);
            }
            this.shopInfo.order = order;
            this.shopInfo.field = column.prop;
            this.getShoplist(1);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.liveInfo.limit = val;
            this.sesstionData()
            this.getLiveList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.live_setpage = val;
            this.liveInfo.page = val;
            this.sesstionData()
            this.getLiveList(val);
        },

        // 每页显示多少条数据
        handleSizeChange2(val) {
            this.shopInfo.limit = val;
            this.getShoplist(1);
        },
        // 当前页切换
        handleCurrentChange2(val) {
            this.shop_setpage = val;
            this.getShoplist(val);
        },
    },
    components: {},
};
</script>

<style>
.comss_table.el-table--enable-row-hover .el-table__body tr:hover>td  {
    background-color: unset !important; 
}
.comss_table .el-table__row{
    cursor: pointer;
}
</style>

<style scoped>
.pb_null {
    padding-bottom: 0;
}
.mt_12 {
    margin-top: 12px;
}
.mt_16 {
    margin-top: 16px;
}
.mt_24 {
    margin-top: 24px;
}
.pass_box {
    border: 1px solid #ebebeb;
    padding: 16px;
}
.pass_title {
    font-size: 14px;
    color: #17233d;
    padding-left: 8px;
    position: relative;
    font-weight: bold;
}
.pass_title::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 8px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: #4475ff;
    border-radius: 1px;
}
.brand_head {
    margin-top: 15px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
    height: 55px;
    border-bottom: 1px solid #ebebeb;
}
.brand_item {
    position: relative;
    cursor: pointer;
    height: 55px;
    margin-right: 20px;
}
.brand_title {
    font-size: 14px;
    color: #616c85;
}
.brand_item::after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    height: 2px;
    background: #4475ff;
    bottom: 0;
    transform: scaleX(0);
    transition: all 0.3s;
}
.brand_item.active::after {
    transform: scaleX(1);
}
.brand_item.active .brand_title {
    color: #17233d;
}
.com_table {
    margin-top: 20px;
}
.shop_time {
    margin-left: 5px;
}
.zonghe_line {
    margin: 24px 0;
    border-bottom: 1px solid #ebebeb;
}
.zonghe_item {
    width: 170px;
    height: 92px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    padding-left: 16px;
    padding-right: 10px;
    margin-right: 16px;
}
.zh_text {
    font-size: 13px;
    color: #616c85;
    line-height: 18px;
    height: 18px;
}
.zh_val {
    font-family: "DINPro";
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #17233d;
    margin-top: 8px;
}
.flow_title {
    max-width: 1134px;
    border-radius: 2px;
    overflow: hidden;
}
.flow_item {
    height: 32px;
    box-sizing: border-box;
    padding: 0 20px;
    width: 50%;
    font-size: 12px;
    color: #fff;
}
.flow_item.blue {
    background: #4475ff;
}
.flow_item.green {
    background: #00d494;
}
.deal_box {
    max-width: 1134px;
}
.deal_left {
    width: 200px;
}
.deal_right {
    height: 200px;
    margin-left: 45px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    box-sizing: border-box;
    padding: 20px;
}
.deal_pay {
    width: 210px;
    height: 100%;
}
.deal_live {
    width: 210px;
    padding: 0 60px;
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    height: 100%;
}
.deal_other {
    width: 210px;
    height: 100%;
}
.deal_item {
    height: 22px;
    font-size: 13px;
}
.pay_circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}
.pay_circle_blue {
    background: #4475ff;
}
.pay_circle_green {
    background: #00cb82;
}
.pay_circle_0 {
    background: #ff855f;
}
.pay_circle_1 {
    background: #ffd74b;
}
.pay_circle_2 {
    background: #49beff;
}
.pay_circle_3 {
    background: #00c6d2;
}
.pay_circle_4 {
    background: #FF8080;
}
.pay_circle_5 {
    background: #0082CB;
}
.pay_circle_6 {
    background: #DFAAFF;
}
.pay_wach_box {
    flex-wrap: wrap;
}
.pay_wach_item {
    width: 270px;
    /* height: 240px; */
    border: 1px solid #ebebeb;
    border-radius: 4px;
    margin-top: 12px;
    margin-right: 12px;
}
.wach_top {
    height: 46px;
    padding: 0 12px;
    background: rgba(165, 177, 209, 0.08);
}
.wach_title {
    margin-left: 8px;
}
.wach_bot {
    padding: 5px 12px;
}
.wach_bot_item {
    height: 36px;
    line-height: 36px;
}
.wach_text {
    font-size: 13px;
    color: #616c85;
}
.wach_val {
    font-size: 14px;
    color: #17233d;
    font-family: "DINPro";
    font-style: normal;
    font-weight: 400;
}
.rat_box {
    margin-top: 24px;
}
.rat_item {
    width: 245px;
    font-size: 13px;
    color: #616c85;
}
.rat_item span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
}
.rat_item span.blue {
    background: #4475ff;
}
.rat_item span.green {
    background: #00d494;
}
.rat_content {
    position: relative;
    margin-top: 20px;
    padding-bottom: 30px;
}
.flow_bg {
    display: block;
    margin: 0 auto;
}
.rat_text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #fff;
    text-shadow: 0px 1px 3px rgba(64, 64, 64, 0.5);
}
.rat_text_black {
    position: absolute;
    font-size: 12px;
    color: #616c85;
    width: 56px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}
.rat_text1 {
    top: 40px;
}
.rat_text2 {
    top: 124px;
}
.rat_text3 {
    top: 205px;
}
.rat_text4 {
    top: 285px;
}
.rat_text5 {
    top: 355px;
}
.rat_text6 {
    top: 15px;
}
.rat_text7 {
    top: 95px;
}
.rat_text8 {
    top: 175px;
}
.rat_text9 {
    top: 260px;
}
.rat_text10 {
    top: 335px;
}
.rat_text11 {
    top: 232px;
    margin-left: -290px;
}
.rat_text12 {
    top: 142px;
    margin-left: -208px;
}
.rat_text13 {
    top: 228px;
    margin-left: -160px;
}
.rat_text14 {
    top: 314px;
    margin-left: -114px;
}
.rat_text15 {
    top: 232px;
    margin-left: 302px;
}
.rat_text16 {
    top: 142px;
    margin-left: 218px;
}
.rat_text17 {
    top: 228px;
    margin-left: 170px;
}
.rat_text18 {
    top: 314px;
    margin-left: 125px;
}
.rat_value_box {
    width: 190px;
    box-sizing: border-box;
    padding: 0 15px;
}
.rat_value_box_l {
    text-align: right;
    margin-left: -95px;
}
.rat_value_box_r {
    text-align: left;
    margin-left: 95px;
}
.shop_content {
    position: relative;
    margin-top: 16px;
    padding-bottom: 20px;
}
.shop_rat_text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #fff;
    line-height: 22px;
    width: 455px;
    text-align: right;
    box-sizing: border-box;
    padding-right: 20px;
    margin-left: -30px;
}
.shop_rat_text_black {
    position: absolute;
    font-size: 12px;
    color: #616c85;
    width: 85px;
    text-align: center;
    line-height: 22px;
    left: 50%;
    transform: translateX(-50%);
}
.shop_rat_text10{
    top: 10px;
}
.shop_rat_text1 {
    top: 90px;
}
.shop_rat_text2 {
    top: 165px;
}
.shop_rat_text3 {
    top: 245px;
}
.shop_rat_text4 {
    top: 324px;
}
.shop_rat_text5 {
    top: 324px;
    text-align: left;
    margin-left: 160px;
}
.shop_rat_text6 {
    top: 135px;
    margin-left: -270px;
}
.shop_rat_text7 {
    top: 35px;
    margin-left: 250px;
}
.shop_rat_text8 {
    top: 114px;
    margin-left: 250px;
}
.shop_rat_text9 {
    top: 212px;
    margin-left: 250px;
}
.shop_rat_text11{
    width: 250px;
    text-align: left;
    top: 165px;
    margin-left: -10px;
}
.shop_rat_text12{
    top: 302px;
    margin-left: 250px;
}
.live_img{
    width: 56px;
    height: 56px;
    border-radius: 2px;
}
.live_name{
    margin-left: 20px;
    font-size: 14px;
    color: #17233D;
}
.author_info_img{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #ebebeb;
}
.live_author_info{
    margin-left: 12px;
}
.author_info_name{
    font-size: 14px;
    color: #17233D;
    height: 20px;
    line-height: 20px;
}
.author_info_id{
    font-size: 14px;
    height:20px;
    line-height: 20px;
    color: #B4B7BD;
    margin-top: 5px;
}
</style>

